<template>
  <div class="form-demo">
    <h2>Form组件综合演示</h2>
    <p class="demo-desc">
      展示Radio、Checkbox、Switch、TimeSelect、DateSelect组件的协调使用效果
    </p>

    <div class="form-container">
      <div class="form-section">
        <h3>🎯 单选选择 (Radio)</h3>
        <div class="form-item">
          <label class="form-label">选择您的性别:</label>
          <RadioComponent v-model="gender" :radioList="genderOptions" />
        </div>

        <div class="form-item">
          <label class="form-label">选择您的年龄段:</label>
          <RadioComponent v-model="ageGroup" :radioList="ageOptions" />
        </div>
      </div>

      <div class="form-section">
        <h3>☑️ 多选选择 (Checkbox)</h3>
        <div class="form-item">
          <label class="form-label">选择您的兴趣爱好:</label>
          <CheckboxComponent v-model="hobbies" :checkboxList="hobbyOptions" />
        </div>

        <div class="form-item">
          <label class="form-label">选择您掌握的技能:</label>
          <CheckboxComponent v-model="skills" :checkboxList="skillOptions" />
        </div>
      </div>

      <div class="form-section">
        <h3>🔄 开关控制 (Switch)</h3>
        <div class="switch-grid">
          <div class="switch-item">
            <SwitchComponent v-model="notifications" label="接收通知" />
          </div>

          <div class="switch-item">
            <SwitchComponent v-model="emailUpdates" label="邮件更新" />
          </div>

          <div class="switch-item">
            <SwitchComponent v-model="darkMode" label="深色模式" />
          </div>

          <div class="switch-item">
            <SwitchComponent v-model="autoSave" label="自动保存" />
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3>🕐 时间选择 (TimeSelect)</h3>
        <div class="form-item">
          <label class="form-label">上班时间:</label>
          <TimeSelectComponent
            v-model="workTime"
            placeholder="请选择上班时间"
          />
        </div>

        <div class="form-item">
          <label class="form-label">工作时间段:</label>
          <TimeSelectComponent
            v-model="workTimeRange"
            :isRange="true"
            startPlaceholder="开始时间"
            endPlaceholder="结束时间"
          />
        </div>

        <div class="form-item">
          <label class="form-label">会议提醒时间:</label>
          <TimeSelectComponent
            v-model="meetingTime"
            :showSeconds="true"
            placeholder="选择提醒时间"
          />
        </div>
      </div>

      <div class="form-section">
        <h3>
          📅 日期选择 (DateSelect)
          <small style="color: #999; font-weight: normal"
            >- 支持快捷选择和年份导航</small
          >
        </h3>
        <div class="form-item">
          <label class="form-label">生日:</label>
          <DateSelectComponent v-model="birthday" placeholder="请选择生日" />
        </div>

        <div class="form-item">
          <label class="form-label">假期时间:</label>
          <DateSelectComponent
            v-model="vacationDateRange"
            :isRange="true"
            startPlaceholder="开始日期"
            endPlaceholder="结束日期"
          />
        </div>

        <div class="form-item">
          <label class="form-label">项目周期:</label>
          <DateSelectComponent
            v-model="projectDateRange"
            :isRange="true"
            startPlaceholder="项目开始"
            endPlaceholder="项目结束"
          />
        </div>
      </div>

      <div class="result-section">
        <h3>📊 表单数据预览</h3>
        <div class="result-card">
          <div class="result-item">
            <span class="result-label">性别:</span>
            <span class="result-value">{{ getGenderText(gender) }}</span>
          </div>

          <div class="result-item">
            <span class="result-label">年龄段:</span>
            <span class="result-value">{{ getAgeText(ageGroup) }}</span>
          </div>

          <div class="result-item">
            <span class="result-label">兴趣爱好:</span>
            <span class="result-value">{{
              hobbies.length > 0 ? hobbies.join(", ") : "未选择"
            }}</span>
          </div>

          <div class="result-item">
            <span class="result-label">技能:</span>
            <span class="result-value">{{
              skills.length > 0 ? skills.join(", ") : "未选择"
            }}</span>
          </div>

          <div class="result-item">
            <span class="result-label">设置:</span>
            <div class="settings-summary">
              <span :class="{ active: notifications }"
                >通知{{ notifications ? "✓" : "✗" }}</span
              >
              <span :class="{ active: emailUpdates }"
                >邮件{{ emailUpdates ? "✓" : "✗" }}</span
              >
              <span :class="{ active: darkMode }"
                >深色{{ darkMode ? "✓" : "✗" }}</span
              >
              <span :class="{ active: autoSave }"
                >自动保存{{ autoSave ? "✓" : "✗" }}</span
              >
            </div>
          </div>

          <div class="result-item">
            <span class="result-label">时间:</span>
            <div class="time-summary">
              <p>上班时间: {{ workTime || "未设置" }}</p>
              <p>工作时间段: {{ formatTimeRange(workTimeRange) }}</p>
              <p>会议提醒: {{ meetingTime || "未设置" }}</p>
            </div>
          </div>

          <div class="result-item">
            <span class="result-label">日期:</span>
            <div class="date-summary">
              <p>生日: {{ birthday || "未设置" }}</p>
              <p>假期时间: {{ formatDateRange(vacationDateRange) }}</p>
              <p>项目周期: {{ formatDateRange(projectDateRange) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RadioComponent from "@/components/form/radio.vue";
import CheckboxComponent from "@/components/form/checkbox.vue";
import SwitchComponent from "@/components/form/switch.vue";
import TimeSelectComponent from "@/components/form/timeSelect.vue";
import DateSelectComponent from "@/components/form/dateSelect.vue";

export default {
  name: "FormDemo",
  components: {
    RadioComponent,
    CheckboxComponent,
    SwitchComponent,
    TimeSelectComponent,
    DateSelectComponent,
  },
  data () {
    return {
      // Radio 数据
      gender: "male",
      ageGroup: "18-25",
      genderOptions: [
        { label: "男", value: "male" },
        { label: "女", value: "female" },
        { label: "其他", value: "other" },
      ],
      ageOptions: [
        { label: "18岁以下", value: "under-18" },
        { label: "18-25岁", value: "18-25" },
        { label: "26-35岁", value: "26-35" },
        { label: "36-45岁", value: "36-45" },
        { label: "46岁以上", value: "over-46" },
      ],

      // Checkbox 数据
      hobbies: ["reading", "music"],
      skills: ["vue", "javascript"],
      hobbyOptions: [
        { label: "阅读", value: "reading" },
        { label: "音乐", value: "music" },
        { label: "运动", value: "sports" },
        { label: "旅游", value: "travel" },
        { label: "摄影", value: "photography" },
        { label: "绘画", value: "painting" },
      ],
      skillOptions: [
        { label: "Vue.js", value: "vue" },
        { label: "React", value: "react" },
        { label: "JavaScript", value: "javascript" },
        { label: "TypeScript", value: "typescript" },
        { label: "Node.js", value: "nodejs" },
        { label: "Python", value: "python" },
      ],

      // Switch 数据
      notifications: true,
      emailUpdates: false,
      darkMode: false,
      autoSave: true,

      // TimeSelect 数据
      workTime: "09:00",
      workTimeRange: ["09:00", "18:00"],
      meetingTime: "14:30:00",

      // DateSelect 数据
      birthday: "1990-05-20",
      vacationDateRange: ["2024-04-01", "2024-04-07"],
      projectDateRange: ["2024-03-01", "2024-05-30"],
    };
  },
  methods: {
    getGenderText (value) {
      const option = this.genderOptions.find((item) => item.value === value);
      return option ? option.label : "未选择";
    },
    getAgeText (value) {
      const option = this.ageOptions.find((item) => item.value === value);
      return option ? option.label : "未选择";
    },
    formatTimeRange (timeRange) {
      if (!timeRange || !Array.isArray(timeRange)) {
        return "未设置";
      }
      return `${timeRange[0] || "未设置"} - ${timeRange[1] || "未设置"}`;
    },
    formatDateRange (dateRange) {
      if (!dateRange || !Array.isArray(dateRange)) {
        return "未设置";
      }
      return `${dateRange[0] || "未设置"} - ${dateRange[1] || "未设置"}`;
    },
  },
};
</script>

<style lang="less" scoped>
.form-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h2 {
    color: #333;
    margin-bottom: 10px;
    text-align: center;
  }

  .demo-desc {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 14px;
  }

  .form-container {
    display: grid;
    gap: 30px;
  }

  .form-section {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #f0f0f0;

    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .form-label {
        display: block;
        margin-bottom: 12px;
        color: #555;
        font-weight: 500;
        font-size: 14px;
      }
    }

    .switch-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;

      .switch-item {
        padding: 15px;
        background: #f9f9f9;
        border-radius: 8px;
        border: 1px solid #eee;
        transition: all 0.3s ease;

        &:hover {
          border-color: #4b58dc;
          background: #f5f7ff;
        }
      }
    }
  }

  .result-section {
    background: linear-gradient(135deg, #f5f7ff, #e8f2ff);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #d1e5ff;

    h3 {
      color: #333;
      margin-bottom: 20px;
      font-size: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .result-card {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .result-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }

        .result-label {
          flex-shrink: 0;
          width: 80px;
          color: #666;
          font-weight: 500;
          font-size: 14px;
        }

        .result-value {
          color: #333;
          font-size: 14px;
          flex: 1;
        }

        .settings-summary {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;

          span {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            background: #f0f0f0;
            color: #666;
            transition: all 0.3s ease;

            &.active {
              background: #4b58dc;
              color: #fff;
            }
          }
        }

        .time-summary {
          p {
            margin: 4px 0;
            font-size: 13px;
            color: #666;
            background: #f8f9fa;
            padding: 6px 10px;
            border-radius: 4px;
            border-left: 3px solid #4b58dc;
          }
        }

        .date-summary {
          p {
            margin: 4px 0;
            font-size: 13px;
            color: #666;
            background: #f0f9ff;
            padding: 6px 10px;
            border-radius: 4px;
            border-left: 3px solid #4b58dc;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .form-demo {
    padding: 15px;

    .form-section .switch-grid {
      grid-template-columns: 1fr;
    }

    .result-section .result-card .result-item {
      flex-direction: column;

      .result-label {
        width: auto;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
